<template>
	<el-col :span="24" id="MEcontent3_container">
		<!-- <el-col :span="24" id="blocksntxs"> -->
			<el-col :span="24" class="MEarea">
				<div class="MEtabletitle">
					<!-- <div id="blockicon"></div> -->
					<span id="MEblockicon"></span>
					<span class="MEtitle">区块</span>
					<span class="MEviewall">
						<router-link to="/MEblocks" class="MEviewalltitle">查看全部</router-link>
					</span>
				</div>
				<!-- <br/> -->
				<el-col :span="24" id="MEblocktable">
					<div class="MEblocksinfotable" v-for="d in blocktableData" v-on:click="blockreaddetail(d)">
						<span class="MEblocknum">#{{d.number}}</span>
						<label class="MEblocktime">{{timeformatter(d.mineTime)}}</label>
						</br>
						<label class="MEblocktxs">{{d.txs}}个交易</label>
					</div>
				</el-col>
			</el-col>

			<el-col :span="24" class="MEarea" id="txel">
				<div class="MEtabletitle" >
					<span id="MEtxicon"></span>
					<span class="MEtitle">交易</span>
					<span class="MEviewall">
						<router-link to="/MEtransactions" class="MEviewalltitle">查看全部</router-link>
					</span>
				</div>

				<el-col :span="24" id="MEtxtable">
					<div class="MEtxsinfotable" v-for="d in txtableData" v-on:click="txreaddetail(d)">
						<span class="MEtxtype" >{{d.type}}</span>
						<span class="MEmarket">{{d.extra.marketName}}</span>
						</br>
						<label class="MEtxhash">{{d.mark}}</label>
						<label class="MEtxtime">{{timeformatter(d.time)}}</label>
					</div>
				</el-col>
			</el-col>
		<!-- </el-col> -->
	</el-col>
</template>

<script>

	import herderjs from "../utils/header.js"

	export default {
		//当前组件定义的变量
		data () {
			return {
				blocklist: "",
				txlist: "",
				blocknum: null,
				blockid: null,
			    blocktableData: null,
			    txtableData: null,
			    flag1: false,
			    flag2: false,
			    refresh_flag: true
			}
		},
		//当前组件创建时调用
		created () {
			this.setData()
		},
		//组件挂载时调用
		mounted() {
			herderjs.$on('refresh_flag', (data) => { 
				this.refresh_flag = data
			})
			herderjs.$on('val', (data) => {
		        if (data===2 && this.refresh_flag) {
	    			let _this = this
					setTimeout(function () {
						// console.log("33333333")
						_this.setData(data)
					}, 10000)
	    		}
		    })
		},
		//组件销毁时调用
		destroyed () {
			//向在全局定义的eventBus中传递参数，实现组件间传值
			if(this.blocklist != "") {
				eventBus.$emit('blockdetail',this.blocklist)
			}
			if(this.txlist != "") {
				eventBus.$emit('txdetail',this.txlist)
			}
			
		},
		//当前组件中定义的方法
		methods: {

			ellipsis (value) {
				if (!value) return ''
				if (value.length > 8) {
					return value.slice(0,8) + '...'
				}
				return value
			},

			rowClass: function (row, index) {
				return { "cursor": "pointer" }
			},

			timeformatter: function(d) {
				let date
				let temp = d
				if(temp.toString().length===10)
				{
					date = new Date(temp * 1000)
				} else {
					date = new Date(temp)
				}
				let a = [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
				function paddNum(s) {
					s += ""
					return s.replace(/^(\d)$/,"0$1");
				}
				let h = paddNum(date.getHours());
				let m = paddNum(date.getMinutes());
				let s = paddNum(date.getSeconds());
				a = a + " " + h + ":" + m + ":" + s
				return a;
			},

			blockreaddetail(d) {
				let param = {hash:d.hash}
				this.$api.post('blockchain/block', param, r => {
					this.blocklist = r
					this.$router.push(`/MEblocks/${JSON.stringify(r.data.hash)}`)
				})
			},

			txreaddetail(d) {
				let param = {txHash:d.txHash}
				this.$api.post('blockchain/tx', param, r => {
					console.log(d.txHash)
					this.txlist = r
					this.$router.push(`/MEtransactions/${JSON.stringify(r.data.txHash)}`)
				})
			},

			setData (val){
				let param = {itemsPerPage:5,whichPage:1}
				//请求5个区块信息
				this.$api.post('blockchain/blocks', param, r => {
					this.blocktableData = r.data
					// console.log("afasfasf")
					this.flag1 = true
					if (this.flag1===true && this.flag2=== true) {
						herderjs.$emit('val',val + 1)
						this.flag1 = false
						this.flag2 = false
					}
				})
				//请求5个交易信息
				this.$api.post('blockchain/txs', param, r => {
					this.txtableData = r.data
					this.txtableData.forEach(function(i,index) {
						let a
						switch (i.type) {
							case "RetailInfo": a="零售单"; i["type"]=a; break;
							case "SaleInfo" : a="销售单"; i["type"]=a; break;
							case "PurchaseInfo" : a="进货单"; i["type"]=a; break;
							case "ReceiveInfo" : a="收货单"; i["type"]=a; break;
							case "AccessCertificate" : a="准入证明"; i["type"]=a; break;
							case "Market" : a="市场检查表"; i["type"]=a; break;
							case "Gov" : a="日常检查表"; i["type"]=a; break;
							default : console.log("haven't such type"); break;
						}
					})
					// console.log(this.flag2)
					this.flag2 = true
					if (this.flag1===true && this.flag2=== true) {
						herderjs.$emit('val',val + 1)
						this.flag1 = false
						this.flag2 = false
					}
				})
			}
		}
	}
</script>

<style scoped>

	#MEcontent3_container {
		margin-top: 0.2rem;
		height: 12rem;
		/*box-shadow: 0 2px 4px 0 rgba(179,179,179,0.50);*/
		/*padding: 10px;*/
	}

	.MEarea {
		border-radius:0.1rem;
		height: 51.5%;
		width: 100%;
		/*margin-left: 0.3%;*/

	}

	.MEtabletitle {
		background-color: rgb(255, 255, 255);
		height: 0.7rem;
		width: 96%;
		margin-left: 2%;
		/*padding-top: 10px;*/
		margin-bottom: 0.06rem;
		border-radius: 0.05rem;
		display: block;
		box-shadow: 0 1px 2px 0 rgba(179,179,179,0.50);
		color: #262626;
		/*border:0.7px solid #B3B3B3;*/
	}

	.MEviewalltitle {
		/*margin-right: 3%;*/
		text-decoration: none;
		color: #262626;
		/*height: 10%;*/
		position: relative;
		float: right;
		line-height: 0.7rem;
		margin-right: 0.1rem;
		/*font-family: SourceHanSansCN-Regular;*/
	}

	#txel {
		margin-top: 0.35rem;
	}

	#MEblockicon {
		float: left;
		width: 0.45rem;
		height: 0.38rem;
		/*margin:0 auto;*/
		position: relative;
		top: 50%;
		margin-top: -0.2rem;
		margin-left: 0.12rem;
		/*margin-top: 0.15rem;*/
		background-image:url('../assets/icon_block_small.png');
		background-size:100% 100%;
		background-repeat:no-repeat;
		/*display: inline-block;*/
	}

	#MEtxicon {
		float: left;
		/*width: 5%;*/
		width: 0.4rem;
		height: 0.4rem;
		/*margin:0 auto;*/
		position: relative;
		top: 50%;
		margin-top: -0.2rem;
		margin-left: 0.12rem;
		/*margin-top: 0.16rem;*/
		background-image:url('../assets/icon_trade_small.png');
		background-size:100% 100%;
		background-repeat:no-repeat;
		/*display: inline-block;*/
	}

	.MEtitle {
		float: left;
		font-size: 0.3rem;
		color: #262626;
		line-height: 0.7rem;
		margin-left: 0.04rem;
	}

	.MEviewall {
		font-size: 0.3rem;
		/*color: #262626;*/
	}

	#MEblocktable {
		height: 92%;
		width: 98%;
		margin-left: 2%;
		overflow-y: auto;
		/*box-shadow: 0 0 1px 0 rgba(179,179,179,0.50);*/
	}

	.MEblocksinfotable {
		box-shadow: 0 0.01rem 0.02rem 0 rgba(179,179,179,0.50);
		/*height: auto;*/
		height: 1.1rem;
		width: 98%;
		background-color: rgb(255,255,255);
		border-bottom: solid 0.01rem rgba(179,179,179,0.50);
	}

	.MEblocknum {
		float: left;
		font-size: 0.3rem;
		margin-left: 0.2rem;
		margin-top: 0.13rem;
		color: #262626;
	}

	.MEblocktxs {
		float: left;
		position: absolute;
		/*display: block;*/
		margin-top: -0.5rem;
		margin-left: 0.25rem;
		font-size: 0.23rem;
		color: #737373;
	}

	.MEblocktime {
		float: right;
		font-size: 0.23rem;
		color: #737373;
		margin-top: 0.72rem;
		margin-right: 0.16rem;
	}

	.MEtxsinfotable {
		box-shadow: 0 0.01rem 0.02rem 0 rgba(179,179,179,0.50);
		/*height: auto;*/
		height: 1.1rem;
		width: 98%;
		background-color: rgb(255,255,255);
		border-bottom: solid 0.01rem rgba(179,179,179,0.50);
	}

	#MEtxtable {
		height: 92%;
		width: 98%;
		margin-left: 2%;
		overflow-y: auto;
	}

	.MEtxtype {
		float: left;
		font-size: 0.3rem;
		margin-left: 0.2rem;
		margin-top: 0.13rem;
		color: #262626;
	}

	.MEmarket {
		float: right;
		font-size: 0.23rem;
		margin-right: 0.2rem;
		margin-top: 0.18rem;
		color: #262626;
		width: 30%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.MEtxtime {
		float: right;
		font-size: 0.23rem;
		color: #737373;
		margin-top: -0.45rem;
		margin-right: 0.16rem;
	}

	.MEtxhash {
		float: left;
		position: absolute;
		/*display: block;*/
		margin-top: -0.45rem;
		margin-left: 0.25rem;
		font-size: 0.23rem;
		color: #737373;
	}

</style>